<template>
  <div>
    <el-form ref="orgform" :model="organization" :rules="rules" label-width="120px" style="width: 90%;margin:5% ">
      <el-row>
        <el-col :span="12">
        <el-form-item label="组织网点代码" required prop="orgCode">
          <el-input v-model="organization.orgCode" :disabled=!!organization.pkid></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="组织网点名称" prop="orgName">
          <el-input v-model="organization.orgName"></el-input>
        </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
        <el-form-item label="所属客户" required prop="customerId">
          <el-button @click="selectCustomer" :disabled=selectDisabled>选 择</el-button>
        </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-input v-model="customerName" :disabled=true></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
        <el-form-item label="省" prop="province">
          <el-input v-model="organization.province"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="市" prop="city">
          <el-input v-model="organization.city"></el-input>
        </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
        <el-form-item label="区" prop="area">
          <el-input v-model="organization.area"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="地址" prop="address">
            <el-input v-model="organization.address"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
        <el-form-item label="联系人" prop="contact">
          <el-input v-model="organization.contact"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="联系电话" prop="telephone">
          <el-input v-model="organization.telephone"></el-input>
        </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="organization.email"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="organization.isdeleted">
          <el-radio :label="'1'">在用</el-radio>
          <el-radio :label="'0'">停用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="所属客户选择" v-model="dialogTableVisible">
      <div>
        <div class="bar">
          <el-input placeholder="请输入客户代码/名称" icon="search" v-model="searchCondition"
           :on-icon-click="handleCustomerSearchIconClick"></el-input>
        </div>
        <br>
        <el-table :data="customers" @row-click="handleCustomerRowClick">
          <el-table-column prop="customerCode" label="客户代码"></el-table-column>
          <el-table-column prop="customerName" label="客户名称"></el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style>
</style>
<script type="text/ecmascript-6">
  import organizationApi from '../../../api/crm/organizationApi'
  import customerApi from '../../../api/crm/customerApi'
  import {vEmail, vPhone} from '../../../common/js/validate'

  export default{
    data () {
      return {
        organization: {},
        selectDisabled: true,
        customerId: '',
        customerName: '',
        rules: {
          orgCode: [
            { required: true, message: '请输入组织网点代码', trigger: 'blur' },
            { max: 10, message: '长度在不超过 10 个字符', trigger: 'blur' }
          ],
          orgName: [
            { required: true, message: '请输入组织网点名称', trigger: 'blur' },
            { max: 20, message: '长度在不超过 20 个字符', trigger: 'blur' }
          ],
          telephone: [
            { validator: vPhone, trigger: 'blur' }
          ],
          email: [
            { validator: vEmail, trigger: 'blur' }
          ]
        },
        dialogTableVisible: false,
        customers: [],
        searchCondition: ''
      }
    },
    created () {
      if (this.$route.params.customerid === undefined) {
        this.selectDisabled = false
      }
      this.customerId = this.$route.params.customerid
      if (this.$route.params.id !== 'create') {
        organizationApi.getOrgById(this.$route.params.id).then(resp => {
          this.organization = resp.body.data
          this.customerId = this.organization.customerId
        })
      }
      customerApi.getCustomerById(this.customerId).then(resp => {
        this.customerName = resp.body.data.customerName
      })
    },
    methods: {
      onSubmit () {
        this.$refs.orgform.validate(valid => {
          if (valid) {
            organizationApi.saveOrg(this.organization).then((data) => {
              this.$message({
                showClose: true,
                message: '保存成功',
                type: 'success'
              })
            })
          } else {
            return false
          }
        })
      },
      cancel () {
        if (this.$route.params.customerid === undefined) {
          this.$router.push('/organization')
        } else {
          this.$router.push({name: 'customerOrgs', params: {customerid: this.$route.params.customerid}})
        }
      },
      selectCustomer () {
        this.dialogTableVisible = true
        customerApi.searchEnabledCustomer().then(resp => {
          this.customers = resp.body.data
          // this.loading = false
        })
      },
      handleCustomerSearchIconClick () {
        customerApi.searchEnabledCustomer(this.searchCondition).then(resp => {
          this.customers = resp.body.data
          // this.loading = false
        })
      },
      handleCustomerRowClick (row, event, column) {
        this.organization.customerId = row.pkid
        this.customerName = row.customerName
        this.dialogTableVisible = false
      }
    }
  }
</script>
